import React, { PureComponent } from 'react';
import { connect } from 'dva';
import styles from './AlimamaOrder.less';
import { Icon, Button, message } from 'antd';

@connect(state => ({
  currentUser: state.user.currentUser,
}))

export default class Cover extends PureComponent {
	state = {
    nicaiCrx: null,
    visible: false,
    version: '',
    visibleChoose: '',
    timeout: null,
  }
	componentDidMount() {
    const timeout = setTimeout(() => {
      if(!this.state.version){
        message.destroy();
        message.warn('请安装尼采创作平台插件！');
      }
    }, 5000);
    this.setState({ timeout });
    const nicaiCrx = document.getElementById('nicaiCrx');
    nicaiCrx.addEventListener('setAlimamaInfo', this.setAlimamaInfo);
    nicaiCrx.addEventListener('setVersion', this.setVersion);
    if (!this.state.nicaiCrx) {
      this.setState({ nicaiCrx }, () => {
        setTimeout(() => {
          this.handleGetVersion();
        }, 1000);
      });
    }
    if (this.props.currentUser._id && this.props.currentUser.alimama && this.props.currentUser.alimama[0]) {
      this.setState({ alimamaUser: this.props.currentUser.alimama[0] });
    }
  }
  componentWillReceiveProps(nextProps) {
    if (nextProps.currentUser._id && nextProps.currentUser.alimama && nextProps.currentUser.alimama[0]) {
      this.setState({ alimamaUser: nextProps.currentUser.alimama[0] });
    }
  }
  componentWillUnmount() {
    this.setState({
      visible: false
    })
    const nicaiCrx = document.getElementById('nicaiCrx');
    nicaiCrx.removeEventListener('setAlimamaInfo', this.setAlimamaInfo);
    if (this.state.timeout) {
      clearTimeout(this.state.timeout);
    }
  }

  handleGetVersion = () => {
    const customEvent = document.createEvent('Event');
    customEvent.initEvent('getVersion', true, true);
    this.state.nicaiCrx.dispatchEvent(customEvent);
  }
  getAlimamaInfo = () => {
    const customEvent = document.createEvent('Event');
    customEvent.initEvent('getAlimamaInfo', true, true);
    this.state.nicaiCrx.dispatchEvent(customEvent);
  }
  setAlimamaInfo = (e) => {
    const data = JSON.parse(e.target.innerText);
    if (data.error) {
      this.setState({
        visible: true
      })
    } else {
      if (data.alimamaUser && data.alimamaUser.memberid) {
        this.setState({ alimamaUser: data.alimamaUser });
      }
    }
  }
  setVersion = (e) => {
    const data = JSON.parse(e.target.innerText);
    const version = data.version;
    this.setState({
      version: data.version,
    });
    if (version && version.length > 0) {
      const arr = version.split('.');
      const versionNumber = Number(arr[0]) * 100 + Number(arr[1]) * 10 + Number(arr[2]);
      if (versionNumber < 104) { // 1.0.4
        message.warn('插件版本较低，请更新！');
      }
    }
    this.getAlimamaInfo();
    this.state.nicaiCrx.removeEventListener('setVersion', this.setVersion);
  }
  handleOk = () => {
    const { currentUser } = this.props;
    window.open('http://pub.alimama.com/myunion.htm?spm=a219t.7900221/1.1998910419.db9f5f632.6cc0f2fbJH3A8I#!/report/detail/taoke');
    this.setState({
      visible: false,
      visibleChoose: true,
    })
  }

  handleLoginOk = () => {
    const { currentUser } = this.props;
    this.getAlimamaInfo();
    this.setState({
      visibleChoose: false,
    });
    this.props.dispatch({
      type: 'tool/fetchAlimamaShops',
      payload: { user_id: currentUser._id },
    });
	}
	
	render() {
		return (
			<div>
				{this.state.visible &&
					<div className={styles.modalOuterBox}>
						<div className={styles.modalBox}>
							<div className={styles.clearFix}>
								<Icon type="warning" style={{ float: 'left', fontSize: 40, marginRight: 10, color: '#faad14', marginRight: 10 }} />
								<span style={{ float: 'left', display: 'inline-block', height: 40, fontSize: 18, lineHeight: '40px' }}>当前页面功能需要先登录阿里妈妈网站</span>
							</div>
							<div className={styles.modalButtonBox}>
								<Button type="primary" onClick={this.handleOk}>去登陆</Button>
							</div>
						</div>
					</div>}

				{
					this.state.visibleChoose && 
					<div className={styles.modalOuterBox}>
						<div className={styles.modalBox}>
							<div className={styles.clearFix}>
								<Icon type="info-circle-o" style={{ float: 'left', fontSize: 36, marginRight: 10, color: '#faad14', marginRight: 10 }} />
								<span style={{ float: 'left', display: 'inline-block', height: 40, fontSize: 18, lineHeight: '40px' }}>是否已成功登陆阿里妈妈网站</span>
							</div>
							<div className={styles.modalButtonBox}>
								<Button type="primary" onClick={this.handleLoginOk} style={{ marginRight: 20 }}>否</Button>
								<Button type="primary" onClick={this.handleLoginOk}>是</Button>
							</div>
						</div>
					</div>
				}
			</div>
		)
	}
}


